<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href=<%=basePath%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>租房订单</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
	<script type="text/javascript" src="<%=path%>/statics/js/jquery-1.8.3.min.js" ></script>
    <script src="<%=path%>/statics/js/rem.js"></script>
    <script src="<%=path%>/statics/js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/page.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/slick/slick.css"/>
	<link rel="stylesheet" href="<%=path%>/statics/css/calendar.css" />
	<script src="<%=path%>/statics/js-pzz/date.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(window).load(function(){
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})
	</script>
	<style type="text/css">
		.Date_lr {
			width: 50%;
			text-align: center;
		}

		.span21 {
			position: absolute;
			top: 50%;
			left: 45%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			font-size: 14px;
			color: #666;
			border: 1px solid #e5e5e5;
			padding: 2px 8px;
			line-height: 20px;
			border-radius: .2rem;
			background-color: #fff;


		}

		#checkinout {
			height: 50px;
			line-height: 50px;
			position: relative;
			margin-top:-10px;
			padding: 2px 0;
			display: -webkit-box;
			display: flex;
			/*border: 1px solid #e5e5e5;*/
			border-radius: .02rem;
			background-color: #fff;
			right: -0.3rem;
		}

		#firstSelect p {
			line-height: 25px;
			color: #999;
			font-size: 12px;
		}

		#startDate {
			border: 0;
			position: absolute;
			left: 0;
			margin: 0 auto;
			width: 50%;
			font-size: 16px;
			color: #F16B80;
			text-align: center;
		}

		#endDate {
			border: 0;
			position: absolute;
			right: 0;
			margin: auto 0;
			width: 50%;
			font-size: 16px;
			color: #F16B80;
			text-align: center;
		}

		.mask_calendar {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0, 0, 0, .4);
			display: none;
			z-index: 9999;
		}

		.calendar {
			height: 400px;
			position: fixed;
			bottom: 0;
			left: 0;
		}

		.animated {
			animation-duration: 1s;
			animation-fill-mode: both;
		}

		@keyframes slideInDown {
			from {
				transform: translate3d(0, -100%, 0);
				visibility: visible;
			}
			to {
				transform: translate3d(0, 0, 0);
			}
		}

		.slideInDown {
			animation-name: slideInDown;
		}
	</style>

</head>
<%
	Object name = session.getAttribute("user");
	if (name == null) {
		out.print("<script>alert('请登录');location='../jsp/sign.jsp'</script>");
	}
%>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>
		<div class="headertwo clearfloat" id="header">
			<a href="javascript:history.go(-1)" class="fl box-s"><i class="iconfont icon-arrow-l fl"></i></a>
			<p class="fl">租房订单</p>
		</div>
		
		<div class="pay clearfloat" id="main">
			<div class="pay-top clearfloat">
				<ul>
					<li class="cur">
						<span>1</span>
						<p>提交信息</p>
					</li>
					<li>
						<span>2</span>
						<p>订单确认</p>
					</li>
					<li>
						<span>3</span>
						<p>用户付款</p>
					</li>
					<li>
						<span>4</span>
						<p>付款成功</p>
					</li>
				</ul>
				<span class="hline">
					<samp class="bline"></samp>
				</span>				
			</div>
			
			<div class="land-ctent clearfloat pay-bottom">
				<ul>
					<li class="box-s clearfloat">
						<p class="tit fl">租房信息</p>
						<p class="xinxi fr">${house.title}</p>
					</li>
					<li class="box-s clearfloat">
						<p class="tit fl">房屋住址</p>
						<p class="xinxi fr">${cityName}${house.xxaddress}</p>
					</li>
					<li class="box-s clearfloat">
						<p class="tit fl">居住时间</p>
						<div id="checkinout">
							<div id="firstSelect" style="width:88%;">
								<div class="Date_lr" style="float:left;">
									<P>入住</p>
									<i class="iconfont icon-calendar"></i>
									<input id="startDate" type="text" value="" style="" readonly>
								</div>
								<div class="Date_lr" style="float:right;">
									<p>离店</p>
									<i class="iconfont icon-calendar"></i>
									<input id="endDate" type="text" value="" style="" readonly>
								</div>
								<span class="span21">共<span class="NumDate">1</span>晚</span>
							</div>
						</div>

						<div class="mask_calendar">
							<div class="calendar"></div>
						</div>
					</li>

					<li class="box-s clearfloat">
						<p class="tit fl">真实姓名</p>
						<input type="text" placeholder="请填写您的真实姓名" name="name" id="name" value="${sessionScope.user.name}">
					</li>
					<li class="box-s clearfloat">
						<p class="tit fl">手机号码</p>
						<input type="text" placeholder="请填写您的手机号码" name="phone" id="phone" value="${sessionScope.user.phone}">
					</li>
					<li class="box-s clearfloat">
						<p class="tit fl">身份证号</p>
						<input type="text" placeholder="请填写您的身份证号码" name="cardid" id="cardid" value="${sessionScope.user.cardId}">
					</li>
				</ul>
				<a style="cursor: pointer" class="pay-btn clearfloat" id="xyb">
					下一步
				</a>
			</div>
		</div>
	</body>


	<script src="<%=path%>/statics/js/fastclick.js"></script>
	<%--<script src="../statics/js/mui.min.js"></script>--%>
	<script type="text/javascript" src="<%=path%>/statics/js/hmt.js" ></script>

<script src="<%=path%>/statics/layui/layui.all.js"></script>
<script>
$(function() {
	$("#xyb").click(function(){
	    if($("#name").val()==""){
            var layer = layui.layer
                , form = layui.form;
            layer.msg('请输入您的真实姓名');
            return;
		}
        if($("#phone").val()==""){
            var layer = layui.layer
                , form = layui.form;
            layer.msg('请输入您的手机号码');
            return;
        }
        var yzPhone = /^1[3,4,5,6,7,8,9]\d{9}$/;
	    if(!yzPhone.test($("#phone").val())){
            var layer = layui.layer
                , form = layui.form;
            layer.msg('请输入正确的手机号码');
            return;
		}
        if($("#cardid").val()==""){
            var layer = layui.layer
                , form = layui.form;
            layer.msg('请输入您的身份证号');
            return;
        }
        /*if($("#cardid").val().length!=18){
            var layer = layui.layer
                , form = layui.form;
            layer.msg('请输入正确的身份证号');
            return;
		}*/

		var day = $(".NumDate").html();
	    var startDate = $("#startDate").val();
	    var endDate = $("#endDate").val();
		location.href="<%=path%>/orders/xOrders.html?house_id=${house.house_id}&day="+day+"&startDate="+startDate+"&endDate="+endDate+"";
	})

    $('#firstSelect').on('click', function() {

        $('.mask_calendar').show();
    });
    $('.mask_calendar').on('click', function(e) {
        if (e.target.className == "mask_calendar") {
            $('.calendar').slideUp(200);
            $('.mask_calendar').fadeOut(200);
        }
    })
    $('#firstSelect').calendarSwitch({
        selectors: {
            sections: ".calendar"
        },
        index: 4, //展示的月份个数
        animateFunction: "slideToggle", //动画效果
        controlDay: true, //知否控制在daysnumber天之内，这个数值的设置前提是总显示天数大于90天
        daysnumber: "90", //控制天数
        comeColor: "#F16271", //入住颜色
        outColor: "#F16271", //离店颜色
        comeoutColor: "#F1C2C5", //入住和离店之间的颜色
        callback: function() { //回调函数
            $('.mask_calendar').fadeOut(200);
            var startDate = $('#startDate').val(); //入住的天数
            var endDate = $('#endDate').val(); //离店的天数
            var NumDate = $('.NumDate').text(); //共多少晚
            console.log(startDate);
            console.log(endDate);
            console.log(NumDate);
            //下面做ajax请求
            //show_loading();
            /*$.post("demo.php",{startDate:startDate, endDate:endDate, NumDate:NumDate},function(data){
                if(data.result==1){
                    //成功
                } else {
                    //失败
                }
            });*/
        },
        comfireBtn: '.comfire' //确定按钮的class或者id
    });
    var b = new Date();
    var ye = b.getFullYear();
    var mo = b.getMonth() + 1;
    mo = mo < 10 ? "0" + mo : mo;
    var da = b.getDate();
    da = da < 10 ? "0" + da : da;
    $('#startDate').val(ye + '-' + mo + '-' + da);
    b = new Date(b.getTime() + 24 * 3600 * 1000);
    var ye = b.getFullYear();
    var mo = b.getMonth() + 1;
    mo = mo < 10 ? "0" + mo : mo;
    var da = b.getDate();
    da = da < 10 ? "0" + da : da;
    $('#endDate').val(ye + '-' + mo + '-' + da);
});
</script>
</html>
